import React, {Component} from 'react'
import {View, Text, ScrollView, StyleSheet, Image, Dimensions} from 'react-native'
import {GetRankingListApi} from '../../config/api'
import LoadingCommon from '../common/loading_common'
import Icon from 'react-native-vector-icons/Ionicons'
import styles from '../../config/styles'
var {height, width} = Dimensions.get('window')

class Ranking extends Component {
    static navigationOptions = ({ navigation }) => {
        let options = {
            title: '排行榜',
            headerRight: <View />            
        }
        return options
       
    }

    constructor (props) {
        super(props)
        this.state = {
            rankings: [],
            loading: true
        }
    }

    componentDidMount () {
        this.getData()
    }

    getData = () => {
        GetRankingListApi().then((data) => {
            if (data.code == 0) {
                console.log('ranking', data)
                this.setState({
                    rankings: data.data,
                    loading: false
                })
            }
        })
    }

    rankLabel = (ranking, index) => {
        let image = require('../../assets/images/role-student-male.png')
        return(
            <View style={styles.rank_label} key={index}>
                <Text style={{color: 'orange', fontSize: 25}}>
                    {index + 1}
                </Text>
                <View style={{marginLeft: 5, marginRight: 5}}>
                    <Image source={image} style={{width: (width / 6), height: (width / 6)}} />
                </View>
                <View style={{flex: 1}}>
                    <Text>
                        {ranking.name}
                    </Text>
                </View>
                <View>
                    <Text style={styles.text_gray}>共收集</Text>
                    <View style={{flexDirection: 'row', paddingRight: 10}}>
                        <Icon name={'ios-star'} color={'#ff951a'} size={15}/>
                        <Text>{ranking.stars}颗</Text>
                    </View>  
                </View>
            </View>
        )
    }
    
    render () {
        if (this.state.loading) {
            return <LoadingCommon />
        } else {
            return (
                <ScrollView>
                    {
                        this.state.rankings.map((ranking, index) => {
                            return this.rankLabel(ranking, index)
                        })
                    }
                </ScrollView>
            )
        }
      
    }
}

export default Ranking